<template>
  <div class="person">
    <h1>情况四：监视【reactive】定义的【对象类型】数据中的某个属性</h1>
    <h2>姓名：{{ person.name }}</h2>
    <h2>年龄：{{ person.age }}</h2>
    <h2>整个车：{{ person.car.car1 }} 、 {{ person.car.car2 }}</h2>
    <button @click="changeName">修改姓名</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changeCar1">修改汽车1</button>
    <button @click="changeCar2">修改汽车2</button>
    <button @click="changeCar">修改整个汽车</button>
  </div>
</template>

<script lang="ts" setup name="Person">
import { reactive, watch } from 'vue'

let person = reactive(
  {
    name: '张三',
    age: 20,
    car: {
      car1: '奔驰',
      car2: '宝马'
    }
  })

function changeName() {
  person.name += '~'
}

function changeAge() {
  person.age += 1
}

function changeCar1() {
  person.car.car1 = '雅迪'
}
function changeCar2() {
  person.car.car2 = '艾玛'
}
function changeCar() {
  person.car = { car1: '小米', car2: '华为' }
}

watch(() => person.name, (newValue, oldValue) => {
  console.log('姓名发生改变，新值：' + newValue + '，旧值：' + oldValue)
})

watch(() => person.car, (newValue, oldValue) => {
  console.log('汽车发生改变', newValue, oldValue)
}, { deep: true })

</script>
<style scoped>
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}

button {
  margin: 0 5px;
}
</style>